<ion-header mode="ios">
  <ion-navbar color="navbar" mode="ios">
    <ion-title mode="ios">
      <img src="../../assets/imgs/title03.png" style="width:62px;height:19px;margin-top:8px;"/>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content style="position: relative;">
  <div class="window" *ngIf="window">
    <div style="text-align: center;margin-top: 30px;">
      <img src="../../assets/icon/bi.svg" alt="">
    </div>
    <div style="font-size:16px;text-align:center;margin-top: 10px;">恭喜你获得<span style="font-size:16px;color:#5695DC;">{{score}}</span>米分！</div>
    <div class="comfirm" tappable (click)="comfirmSign()">确认</div>
  </div>
  <div class="duihuanyes" *ngIf="duihuanYes">
    <span class="closeBtn" tappable (click)="duihuanYes=false">×</span>
    <p style="font-size:14px;text-align:center;">米分兑换</p>
    <p style="font-size:12px;margin-top:15px;">米分可兑换一定比例的现金红包奖励或话费奖励。</p>
    <p style="font-size:12px;margin-top:15px;color:orange;">添加客服QQ，输入手机号，并与工作人员联系。</p>
    <div class="comfirm" tappable (click)="copyQQ()">复制客服QQ号</div>
  </div>
  <div class="duihuanno" *ngIf="duihuanNo">
    <span class="closeBtn" tappable (click)="duihuanNo=false">×</span>
    <p style="font-size:14px;text-align:center;">米分兑换</p>
    <p style="font-size:12px;margin-top:15px;">米分可兑换一定比例的现金红包奖励或话费奖励。</p>
    <p style="font-size:12px;margin-top:15px;color:orange;">您当前米分还未达到起兑额度</p>
    <p style="font-size:12px;color:orange;">继续加油哦！</p>
    <div class="comfirm">复制客服QQ号</div>
  </div>
  <div class="wrap">
    <ul style="margin-top:15px;padding:0 10px;display:flex; justify-content:space-between;">
      <li *ngFor="let item of qiandao  index as i">
        <div *ngIf="(i+1) <= signNum" style="width:40px;height:40px;background:#ffffff;overflow: hidden;">
          <div style="font-size:14px;width:30px;height:30px;border-radius:50%;background:orange;color:#fff;margin:5px auto 0;text-align: center;line-height: 30px;">+{{i === 6 ? 22 : item}}</div>
        </div>
        <div (click)="signClick(i)" tappable *ngIf="(i+1) > signNum" class="qiandaotu">
          <div class="qiandao" [ngClass]="{'text-liwu':i === 6}">{{item}}</div>
        </div>
        <div style="text-align:center;margin-top:10px;">第{{i + 1}}天</div>
      </li>
    </ul>
    <div style="padding:12px 16px;font-size:14px;margin-top:15px;border-bottom:1px solid rgba(247, 249, 250, .5);">您已连续签到<span style="color:orange;font-size:14px;">{{signNum}}</span>天，连续签到<span style="color:orange;font-size:14px;">7</span>天，可获得初级礼包。</div>
    <div style="padding:20px 16px 10px; border-bottom:10px solid rgba(247, 249, 250)">
      <div style="overflow: hidden;">
        <div style="border-left:3px solid #5695DC;float:left;height:15px;margin-right:5px;"></div>
        <span style="font-size:14px;font-weight:900;">当前米分:</span>
        <span style="color:orange;font-size:14px;">{{mifenScore}}</span>
        <span style="color: blue;font-size:14px;float:right;" tappable (click)="duihuan()">米分兑换</span>
      </div>
      <p style="font-size:12px;color:#999;margin-top:10px;">米分介绍: 1000米分可兑换10元现金红包或等额话费及商品。</p>
    </div>
    <div style="padding:15px 16px 0;">
      <div style="overflow: hidden;">
        <div style="border-left:3px solid #5695DC;float:left;height:15px;margin-right:5px;margin-top:4px;"></div>
        <div style="font-size:14px;font-weight:900;float:left;margin-top:4px;">限时红包专场:</div>
        <span *ngIf="isHongbaoText" style="float:right;color:#5695DC;font-size: 14px;margin-top:5px;">抢红包进行中…</span>
        <span *ngIf="isHongbaoGuang" style="float:right;color:#999;font-size: 14px;margin-top:5px;">红包已抢光</span>
        <span style="float:right;font-size:14px;" *ngIf="!isHongbao">
          剩余
          <span style="color:#fff;display:inline-block;width:25px;height:25px;text-align:center;line-height:25px;background:#5695DC;vertical-align:bottom;border-radius:2px;">{{hours}}</span>
          小时
          <span style="color:#fff;display:inline-block;width:25px;height:25px;text-align:center;line-height:25px;background:#5695DC;vertical-align:bottom;border-radius:2px;">{{minutes}}</span>
          分
          <span style="color:#fff;display:inline-block;width:25px;height:25px;text-align:center;line-height:25px;background:#5695DC;vertical-align:bottom;border-radius:2px;">{{seconds}}</span>
          秒
        </span>
      </div>
    </div>
    <div style="margin-top:25px;">
      <div class="hongbaotu" *ngIf="isHongbaoImg" tappable (click)="qianghongClick()"></div>
      <div class="hongbao" *ngIf="!isHongbaoImg">
        <div class="hongbaochild">
          <p style="color: orange;font-size: 20px;color:orange;text-align:center;margin-top:30px;">{{hongbaoScore}}</p>
          <p style="font-size:12px; text-align: center;margin-top:5px;">恭喜您获得{{hongbaoScore}}米分</p>
        </div>
      </div>
      <p style="text-align:center;margin-top:10px;color: #5695DC;">抢10万米分</p>
    </div>
    <div class="marqueebox" *ngIf="isHongbaoText">
      <span class="img"></span>
      <marquee behavior="scroll" direction="left" class="marquee">{{marqueeStirng}}</marquee>
    </div>
  </div>
</ion-content>
